<template>
  <div class="login">
    <div class="login-box">
      <div class="backHome">
        <span class="backHomeText" @click="backHomeHandleClick">不想注册，返回首页</span>
        
      </div>
      <div class="title">博客注册</div>
      <div class="content">
        <el-form 
        :model="form" 
        label-width="100px"
        :rules="accountRules"
        status-icon
        ref="formRef"
        >
          <el-form-item  
          :label="loginRegister ? '账号' : '注册账号' "
          prop="name"
          >
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item  label="昵称" v-if="!loginRegister" prop="nickname">
            <el-input v-model="form.nickname" />
          </el-form-item>
          <el-form-item 
          :style=" loginRegister ? 'margin-top:68px;':' ' "
          :label="loginRegister ? '密码' : '注册密码' "
          prop="password"
          >
            <el-input v-model="form.password" show-password />
          </el-form-item>
          <el-form-item label="确认密码" v-if="!loginRegister">
            <el-input v-model="form.notarizepassWord" show-password />
          </el-form-item>
        </el-form>
      </div>
      
      <div class="footer">
        <el-button class="loginBtn" type="primary" @click="loginHandleClick">{{ loginRegister ? '登录' : '注册'}}</el-button>
        <div class="tip">
          <div @click="forgetPassword">忘记密码</div>
          <div @click="loginRegisterHandleClick">{{loginRegister ? '没有账号去注册' : '已有账号去登陆'}}</div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormRules, ElForm } from 'element-plus'
import useLoginStore from '@/store/login/login'
import { ElMessage } from 'element-plus'
import router from '@/router';
const loginStore  = useLoginStore()

const loginRegister = ref(true)
const form = reactive({
  name: '',
  nickname: '',
  password: '',
  notarizepassWord: ''
}) 

//定义校验规则
const accountRules: FormRules = {
  name: [
    { required: true, message: '请输入账号~', trigger: 'blur'},
    { pattern: /^[a-z0-9]{4,11}$/, message: '账号由字母或数字组成4~11位长度', trigger: 'blur'}
  ],
  password: [
    { required: true, message: '请输入密码~', trigger: 'blur'},
    { pattern: /^[a-z0-9]{6,12}$/, message: '密码由字母或数字组成6~12位长度', trigger: 'blur'}
  ],
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur'},
    { pattern: /^[a-z0-9]{1,12}$/, message: '昵称组成1~12位长度', trigger: 'blur'}
  ],
}

//返回首页
function backHomeHandleClick() {
  router.push('/homePage')
}


//确定按钮
function loginHandleClick() {
  //有值为登录 没值为注册
  if(loginRegister.value) {
    const name = form.name
    const password = form.password
    // console.log('登录',name,password)
  loginStore.loginRequestAction(name,password)
    form.name = ''
    form.password = ''
  }else {
    const name = form.name
    const nickname = form.nickname
    const password = form.password 
    const notarizepassWord = form.notarizepassWord 
    // console.log(name,nickname,password,notarizepassWord)
    if(name && nickname && password && password == notarizepassWord) {
      loginStore.registerUserAction({name, password, nickname})
    }else {
      ElMessage({type: 'error', message: '输入内容不全或密码两次输入一致'})
    }
    form.name = ''
    form.nickname = ''
    form.password = ''
    form.notarizepassWord = ''
  }
  
}

//等率注册切换
function loginRegisterHandleClick() {
  loginRegister.value = !loginRegister.value
  form.name = ''
  form.nickname = ''
  form.password = ''
  form.notarizepassWord = ''
}

function forgetPassword() {
  ElMessage({type: 'warning', message: '博主没有做这个功能'})
}

</script>

<style scoped lang="less">
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/img/路过宇宙.jpg') center/cover;
  .login-box {
    // box-shadow: 0 0 6px #6a6b6d;
    width: 400px;
    height: 400px;
    text-align: center;
    .backHome {
      display: flex;
      justify-content: left;
      .backHomeText {
        font-size: 12px;
        color: #3f3f40;
        &:hover {
          font-weight: bolder;
          color: #409EFF;
          cursor: pointer;
        }
      }
    }
    .title {
      margin: 40px 0;
    }
    .content {
      height: 200px;
      width: 350px;
      margin: auto;
      .el-input {
        width: 200px;
      }
    }
    
    .footer {
      margin-bottom: 0;
      padding: 20px;
      .loginBtn {
        width: 350px;
      }
      .tip {
        color:#3f3f40;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        padding: 5px 20px;
        div:hover {
          color: #409EFF;
          cursor: pointer;
        }
      }
    }
    

  }
}

.el-input {
  border: 1px solid #409EFF;
  border-radius: 5px;
  color: #409EFF;
}
</style>
